import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Row, Col, Card, Form, Input, Select, Button, DatePicker } from 'antd';
const { RangePicker } = DatePicker;
import RadioStationTable from '../../components/RadioStation/RadioStationTable';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';

import styles from './RadioStationList.less';

const FormItem = Form.Item;
const { Option } = Select;
const getValue = obj => Object.keys(obj).map(key => obj[key]).join(',');

@connect(state => ({
  radioStation: state.radioStation,
}))
@Form.create()
export default class RadioStationList extends PureComponent {
  state = {
    pageNo:1,
    pageSize:8,
    addInputValue: '',
    modalVisible: false,
    expandForm: false,
    selectedRows: [],
    formValues: {},
    rsName:""
  };

  componentDidMount() {
    const pageNo = this.state.pageNo;
    const pageSize = this.state.pageSize;
    const rsName = this.state.rsName;
    this.handleInitSearch(pageNo,pageSize,rsName);
  }
  //把初始化查询的代码抽离出来
  handleInitSearch = (pageNo,pageSize,rsName) => {
    const { dispatch } = this.props;
    const params = {
      pageNo: pageNo,
      pageSize: pageSize,
      rsName:rsName
    };
    dispatch({
      type: 'radioStation/listRadioStation',
      payload:params,
    });
  }

  //实现分页查询电台
  handleRadioStationTableChange = (pagination, filters, sorter) => {
    const { rsName } = this.state;
    const pageNo = pagination.current;
    const pageSize = pagination.pageSize;
    this.setState({
      pageNo:pageNo,
    },() => {
      this.handleInitSearch(pageNo,pageSize,rsName);
    });
  }

  //重置查询电台
  handleFormReset = () => {
    const { form } = this.props;
    form.resetFields();
    this.setState({
      pageNo:1,
    },() => {
      const {pageNo,pageSize} = this.state;
      this.handleInitSearch(pageNo,pageSize,"");
    });
  }

  /**
   * 修改电台状态
   * @param record
   * @param status
   */
  updateRadioStationStatus = (record,status) => {
    const { dispatch } = this.props;
    const params = {
      id:record.id,
      status:status,
    };
    dispatch({
      type: 'radioStation/updateRadioStationStatus',
      payload:params,
      callback:(response)=> {
        const {pageNo,pageSize,rsName} = this.state;
        this.handleInitSearch(pageNo,pageSize,rsName);
      }
    });
  }

  handleSearch = (e) => {
    const self = this;
    e.preventDefault();
    const { form } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      var rsName = fieldsValue.rsName && fieldsValue.rsName.valueOf();
      if(rsName == undefined){
        rsName = "";
      }
      self.setState({
        pageNo:1,
        rsName:rsName
      },() => {
        const {pageNo,pageSize} = self.state;
        self.handleInitSearch(pageNo,pageSize,rsName);
      });
    });
  }

  renderForm() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="电台名称">
              {getFieldDecorator('rsName')(
                <Input placeholder="电台名称" />
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <span className={styles.submitButtons}>
              <Button type="primary" htmlType="submit">查询</Button>
              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>重置</Button>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }

  render() {
    const { radioStation: { loading: loading, radioStationData } } = this.props;
    const { selectedRows} = this.state;
    return (
      <PageHeaderLayout>
        <Card bordered={false}>
          <div className={styles.tableList}>
            <div className={styles.tableListForm}>
              {this.renderForm()}
            </div>
            <RadioStationTable
              selectedRows={selectedRows}
              loading={loading}
              radioStationData={radioStationData}
              onChange={this.handleRadioStationTableChange}
              updateRadioStationStatus={(record,status)=>this.updateRadioStationStatus(record,status)}
            />
          </div>
        </Card>
      </PageHeaderLayout>
    );
  }
}
